<template>
  <div class="breadcrumb">
    <span @click="goToRoot">首页</span>
    <span v-for="(dir, index) in pathStack" :key="dir.fileId" @click="navigateTo(dir)">
      / {{ dir.fileName }}
    </span>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  pathStack: {
    type: Array,
    required: true
  }
})

const emits = defineEmits(['go-root', 'navigate'])

const goToRoot = () => emits('go-root')
const navigateTo = (dir) => emits('navigate', dir)
</script>

<style scoped>
.breadcrumb {
  margin: 10px 5px;
  font-size: 14px;
  color: #8c939d;
}
.breadcrumb span:hover {
  color: #1890ff;
  cursor: pointer;
}
</style>